<template>
	<view>
		<view class="top-fixed">
			<view class="user-info">
				<image src="../../../static/image/user_bg.png"></image>
				<view>
					<view>
						<view hover-class="hover_class" @click="statusShow = true">
							<image :src="require('@/driverPackage/image/dviverIcon.png')"></image>
							<view>
								<text class="danshen">{{ userInfo.nickname || '加载中'  }}</text>
								<view
								:class="{'red': userInfo.fullyStatus == 2}"
								>{{ userInfo.fullyStatus == 2 ? '满载' : '正常' }} ></view>
							</view>
						</view>
						<view hover-class="hover_class" @click="openDialog('loginout')">
							<text>退出登录</text>
							<image src="../../../static/image/back_light.png"></image>
						</view>
					</view>
				</view> 
			</view>
			<view class="searchs">
				<view class="search-row">
					<input placeholder="请输入你想搜索的内容" v-model="postData.keywords" @change="searchData" />
					<image :src="require('@/userPackage/image/search.png')"></image>
				</view>
				<view class="tabs">
					<view v-for="(item,index) in tabArr" :key="index"  @click="checkTab(item)">
						<view :class="{'active':postData.status==item.id}">{{item.name}}
						<view v-if="postData.status==item.id" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<swiper :current="tabIndex" scroll-y class="swiper-box" scroll-with-animation :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="(tab,itemIndex) in tabArr" :key="itemIndex">
				<scroll-view scroll-y
				  lower-threshold="50"
				  @scrolltolower="scrollToLower"
				  style="max-height: calc(100vh - 330upx);"
				>
					<view class="list-box" v-if="orderList.length !== 0">
						<view v-for="(item, index) in orderList" :key="index" @click="goDetail(item)">
							<view class="head">
								<view>
									<image src="../../../static/image/user_icon.png"></image>
									<view>
										<text class="danshen">{{ item.member_nickname }}</text>
										<view class="danshen">下单时间：{{ item.addtime }}</view>
									</view>
								</view>
								<view>
									<view>{{ item.status_name }}</view>
								</view>
							</view>
							<view class="conts" v-for="(it,ix) in item.product_list" :key="ix">
								<image :src="it.product_image"></image>
								<view>
									<view>{{it.name}}</view>
									<view>{{it.attr_name}}</view>
									<view class="infosd">
										<view>
											<view>
												<text>￥</text>
												<view>{{it.price}}</view>
											</view>
											<text>￥{{it.market_price || 0}}</text>
										</view>
										<text>x{{it.number}}</text>
									</view>
								</view>
							</view>
							<!-- <view class="status-btn">
								<view hover-class="hover_class" 
								@click.stop="openDialog('goods', item)"
								v-if="item.status == 2">确认取货</view>
								<view hover-class="hover_class"
								 @click.stop="openDialog('transport', item)"
								 v-if="item.status == 3">开始运输</view>
								<view hover-class="hover_class"
								 @click.stop="goDetail(item, 'over')"
								 v-if="item.status == 4">完成订单</view>
							</view> -->
						</view>
					</view>
					<view class="supplier-pad" v-else>
						<empty title="暂无订单数据"/>
					</view>
					<loadMore :loadmore="loadmore" v-if="orderList.length!==0"/>
				</scroll-view>
			</swiper-item>
		</swiper>
		<centerPop ref="tipsPop" :content="tips[checkType].content" :title="tips[checkType].title" @save="saveData" />
		<u-action-sheet :actions="list" 
		 :closeOnClickOverlay="true" :closeOnClickAction="true"
		:safeAreaInsetBottom="true"
		cancelText="取消"
		@close="statusShow = false"
		@select="checkDrStatus"
		:show="statusShow"></u-action-sheet>
	</view>
</template>

<script>
	import order from 'mixins/order.js'
	import config from 'static/js/config.js'
	import {
		changeFullyStatus
	} from 'utils/api/user.js'
	export default {
		mixins: [order],
		data() {
			return {
				list: [
					{
						name:'满载',
						id: '2'
					},
					{
						name: '正常',
						id: '1'
					},
				],
				statusShow: false,
				statusClass: {
					...config.statusClass,
					5: { bgColor: '#eeeeee', color: '#585858' },
				},
				tabArr: [{name: '全部', id: ''},{name: '待收货', id: 3}, {name: '已收货', id: 4}],
				tips: {
					'goods': { title: '取货', content: '确认取货吗?' },
					'transport': { title: '开始运输', content: '确认开始运输吗?' },
					'over': { title: '完成订单', content: '确认订单已完成吗?' },
					'loginout': { title: '退出登录', content: '确认退出登录吗?' },
				},
			}
		},
		onShow() {
			setTimeout(() => { // 使用延时，避免隐藏不生效
			  wx.hideHomeButton()
			}, 200);
		},
		methods: {
			goDetail(item, key) {
				uni.navigateTo({
					url: `/driverPackage/pages/orderList/detail?id=${item.id}`
				})
			},
			// 设置满载状态
			checkDrStatus(e) {
				uni.showLoading({
				  title: '更新中',
				  mask: true
				})
				changeFullyStatus({fully_status: e.id}).then((res) => {
					uni.hideLoading()
					uni.showToast({ title: '设置成功', icon: 'none'})
					setTimeout(() => {
						this.getInfo();
					}, 600)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import "../../css/orderList.scss";
</style>